<template>
	<view>
		<view class="select" @click="openFn">
			{{name}}
			<image class="icon" src="../static/image/icon-down.png" mode="widthFix"></image>
			<view class="options" v-if="open" :style="{
				width:(name=='学校排名'||name=='全省排名'||name=='全市排名'||name=='全区排名'||name=='全国排名')?200+'px':'',
				left:(name=='学校排名'||name=='全省排名'||name=='全市排名'||name=='全区排名'||name=='全国排名')?-50+'px':'' }">
				<view v-if="(name=='学校排名'||name=='全省排名'||name=='全市排名'||name=='全区排名'||name=='全国排名')" style="display: flex;flex-direction: row;text-align: center;
    justify-content: center;
    vertical-align: middle;
    align-items: center;color: white;">
					<view style="flex: 1;" class="" @click.stop="openGradePicker()">
						年级：{{grade}}
					</view>
					<view style="width:10px;"></view>
					<view style="flex: 1;" class="" @click.stop="openClassesPicker()">
						班级：{{classes}}
					</view>
				</view>

				<view class="option" :class="opt === val ? 'option-a' : ''" v-for="opt, i in options" :key="i">
					<view class="" @click="changeFn(opt)">
						{{opt.name}}
					</view>
				</view>
			</view>
		</view>

		<!-- 性别等其他选择 -->
		<uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
	</view>
</template>

<script>
	export default {
		name: "select-option",
		props: {
			options: {
				type: Array
			},
			val: {
				type: String
			},
			name: {
				type: String
			}
		},
		data() {
			return {
				open: false,

				provinces: [], //省
				citys: [], //市
				areas: [], //区
				pickerValue: [0, 0, 0],
				defaultValue: [0, 0, 0],
				columns: [],
				chooseSex: '',
				chooseCardType: '',
				chooseGrade: '',
				chooseArea: '',
				chooseSchool: '',
				pickerType: 1, // 1-性别 2-证件类型 3-年级 4-班级 5-学校
				grade: '全部',
				classes: '全部',
			};
		},
		methods: {
			openFn(e) {
				if (this.name == '周榜') {
					this.$emit('fnReset', '周榜')
				}
				if (this.name == '学校排名' || this.name == '全省排名' || this.name == '全市排名' || this.name == '全区排名' || this
					.name == '全国排名') {
					this.$emit('fnReset', this.name)
				}
				if (this.name == '拼词竞技') {
					this.$emit('fnReset', '拼词竞技')
				}
				this.open = !this.open
			},
			closeFn() {
				console.log(1)
				this.open = false
			},
			changeFn(e) {
				this.$emit('change', e)
			},
			changeMoreFn(e) {

			},
			openGradePicker() {
				this.columns = []
				this.pickerType = 3
				const list = this.$util.gradeData().map(item => item.dictLabel)
				list.unshift('全部')
				console.log(list)
				this.columns.push(list)
				this.$refs.picker.open()
			},
			openClassesPicker() {
				this.columns = []
				let arr = []
				for (let i = 0; i < 30; i++) {
					arr.push(i + 1)
				}
				arr.unshift('全部')
				this.columns.push(arr)
				this.pickerType = 4
				this.$refs.picker.open()
			},
			confirm(e) {
				switch (this.pickerType) {
					case 3:
						console.log(e)
						this.chooseGrade = e.value[0]
						if (this.chooseGrade != '全部') {
							this.grade = this.$util.gradeData().find(item => item.dictLabel === this.chooseGrade)
								.dictValue
							this.$emit('fnChangeGrage', this.grade)
						} else {
							this.grade = '全部';
							this.$emit('fnChangeGrage', this.grade)
						}
						break;
					case 4:
						this.classes = e.value[0]
						this.$emit('fnChangeClasses', this.classes)
						break;
				}
			},
		}
	}
</script>

<style lang="less">
	.select {
		width: 110px;
		height: 32px;
		text-align: center;
		line-height: 28px;
		background: linear-gradient(to bottom, #ffd16b, #fff497);
		border: 2px solid #d7af59;
		border-radius: 32px;
		color: #000;
		font-family: hzgb;
		font-size: 14px;
		position: relative;

		.icon {
			width: 26px;
			position: absolute;
			right: -2px;
			top: -2px;

		}

		.options {
			position: absolute;
			top: 40px;
			left: 0;
			right: 0;
			z-index: 100;
			width: 100px;
			background: linear-gradient(to top, #373632, #130e00);
			border: 4px solid #363532;

			.option {
				color: #fff;
				padding: 6px 0;
			}

			.option-a {
				color: #ffd16b;
			}
		}
	}
</style>